<template>
  <view class="x-date-picker-view">
    <u-form class="commonForm" labelWidth="200rpx">
      <u-form-item label="年">
        <x-date-picker v-model="year" type="year"></x-date-picker>
      </u-form-item>
      <u-form-item label="年月">
        <x-date-picker v-model="month" type="month"></x-date-picker>
      </u-form-item>
      <u-form-item label="年月日">
        <x-date-picker v-model="date" type="date"></x-date-picker>
      </u-form-item>
      <u-form-item label="年月日时">
        <x-date-picker v-model="dateHour" type="dateHour"></x-date-picker>
      </u-form-item>
      <u-form-item label="年月日时分">
        <x-date-picker v-model="dateMinute" type="dateMinute"></x-date-picker>
      </u-form-item>
      <u-form-item label="年月日时分秒">
        <x-date-picker v-model="dateTime" type="dateTime"></x-date-picker>
      </u-form-item>
      <u-form-item label="时分">
        <x-date-picker v-model="minute" type="minute"></x-date-picker>
      </u-form-item>
      <u-form-item label="时分秒">
        <x-date-picker v-model="time" type="time"></x-date-picker>
      </u-form-item>
    </u-form>
  </view>
</template>

<script>
import XDatePicker from "../uni_modules/x-date-picker/components/x-date-picker/x-date-picker";
export default {
  components: {XDatePicker},
  data() {
    return {
      year: '',
      month: '',
      date: '',
      dateHour: '',
      dateMinute: '',
      dateTime: '',
      minute: '',
      time: '',
    }
  }
}
</script>

<style scoped lang="scss">
  .x-date-picker-view {
    padding: 30rpx;
  }
</style>
